<script setup>
import { computed } from 'vue'
import rftitle from './rftitle.vue'
import { distributionCabinet } from '../pages/home/index'


// const TList = computed(() => {
//   let item = distributionCabinet.value[0]
//   return [
//     ...distributionCabinet.value, item
//   ]
// })



</script>

<template>
  <div class="flex flex-col h-full">

    <rftitle class="mb-[10px]" title="配电柜"></rftitle>


    <div class="mb-[6px] flex-1" v-for="(item, index) in distributionCabinet" :key="index">
      <!-- <div class="mb-[4px] flex-1" v-for="(item, index) in TList" :key="index"> -->

      <div class="flex items-end h-[57px]">

        <div class="w-[88px] h-[28px] relative">
          <img class="w-[88px] h-[28px]" src="../assets/four/3222.png" alt="">
          <img class="w-[40px] h-[40px] absolute left-[24px] mt-[-29px]" src="../assets/five/3-25-3.png" alt="">
        </div>
        <div class="ml-[20px] mr-[56px]">
          <!-- <div class="text-[16px] text-white font-semibold flex items-center ">{{ item.name }}</div> -->
          <div class="status_color_blue font-semibold text-[28px] mb-[18px] mt-[8px]">{{ item.name }}</div>
        </div>
        <!-- <div>
          <div class="text-[16px] text-white ">{{ item.fuelOil }}</div>
          <div class="status_color_blue font-semibold text-[24px] mb-[5px] mt-[8px]">{{ item.status }}</div>
        </div> -->

      </div>

      <div class="flex flex-wrap mt-[12px]">

        <div class="w-[50%] text-[14px] flex mb-[10px]" style="color: #B2E5FF;" v-for="(i, n) in item.data" :key="n">
          <div :class="i.w">{{ i.name }}</div>
          <div class="text-[14px] text-white ml-[5px]">
            {{ i.value }}
          </div>
        </div>




      </div>
      <div v-if="index !== (distributionCabinet.length - 1)" class="mt-[4px] h-[2px] box5"></div>
      <!-- <div v-if="index !== (TList.length - 1)" class="mt-[4px] h-[2px] box5"></div> -->


    </div>












  </div>

</template>

<style scoped>
.box5 {
  background-image: url(../assets/five/3-25-2.png);
  background-size: 100% 100%;
}
</style>
